<template>
  <div class="app-container home">

<!--    <el-divider />-->
    <el-row :gutter="20" class="box">
      <el-col :span="6">
        <el-card style="background-color: #faf7ff" class="box-card-top" shadow="hover">
          <div slot="header" class="clearfix">
            <h1>商户基本数据</h1>
          </div>
          <div class="text item">
            <h3>资源数量: {{shopInfo.resourceCount}}</h3>
            <h3>剩余视频发送数量: {{shopInfo.videoSentCount}}</h3>
            <h3>发布优惠券活动数量: {{shopInfo.activityCount}}</h3>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6" v-if="rolesKey == '00'">
        <el-card style="background-color: #ebffe9" class="box-card-top" shadow="hover">
          <div slot="header" class="clearfix">
            <h1>商家和代理商数量</h1>
          </div>
          <div class="text item">
            <h3>商户数量: {{shopAndProxyCount.shopCount}}</h3>
            <h3>代理商数量: {{shopAndProxyCount.proxyCount}}</h3>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="background-color: #dff1ff" class="box-card-top" shadow="hover">
          <div slot="header" class="clearfix" @click="handleRouter('/coupon/coupon/activity') ">
            <h1>活动数据</h1>
          </div>
          <div class="text item" @click="handleRouter('/coupon/coupon/activity') ">
            <h3>待上线: {{activityStatus.statusUnused}}</h3>
            <h3>上线中: {{activityStatus.statusUsed}}</h3>
            <h3>已下线: {{activityStatus.statusExpired}}</h3>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card style="background-color: #f9ffee" class="box-card-top" shadow="hover">
          <div slot="header" class="clearfix" @click="handleRouter('/order/order/list') ">
            <h1>订单数据</h1>
          </div>
          <div class="text item" @click="handleRouter('/order/order/list') " >
            <h3>交易成功: {{orderData.statusSucceed}}</h3>
            <h3>交易失败: {{orderData.statusFail}}</h3>
            <h3>总金额: {{orderData.amount}}</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row v-if="rolesKey != '00'">
      <el-col :span="24">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <h1>优惠券情况</h1>
          </div>
<!--          <div class="text item" v-for="coupon in couponInfoAndStatusList" :key="coupon">-->
<!--            <h3>{{coupon.title}} 已使用: {{coupon.statusUsed}} 未使用: {{coupon.statusUnused}} 已过期: {{coupon.statusExpired}} 还剩余：{{coupon.quantity}}</h3>-->
<!--          </div>-->
          <el-table
            :data="couponInfoAndStatusList"
            border
            style="width: 100%">
            <el-table-column
              prop="title"
              label="优惠券"
              width="180">
            </el-table-column>
            <el-table-column
              prop="statusUsed"
              label="已使用">
            </el-table-column>
            <el-table-column
              prop="statusUnused"
              label="未使用">
            </el-table-column>
            <el-table-column
              prop="statusExpired"
              label="已过期">
            </el-table-column>
            <el-table-column
              prop="quantity"
              label="还剩余">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col>
        <el-card class="box-card" shadow="hover">
          <div style="width: 100%; height: 500px; " id="chart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import config from '../../package.json'
import {getShopCount, getActivityStatus, getShopVideoStackedLine, getShopCouponInfo, getShopInfo, getOrderData} from '@/api/dashboard'
import { mapState } from "vuex";
let Echarts = require('echarts/lib/echarts');
// 引入折线图
require("echarts/lib/chart/line");
// 引入提示框、标题组件、图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: config.version,

      // 商家数量和代理商数量
      shopAndProxyCount: {},

      // 优惠券活动各状态数量
      activityStatus: {},

      // 商户基本数据
      shopInfo: {},

      // 订单基本数据
      orderData: {},

      // 优惠券信息与状态统计
      couponInfoAndStatusList: [],

      // 商户视频 折线图堆叠对象
      videoStackedLineChart: null,
    };
  },
  created() {
    this.queryShopCount();
    this.queryActivityStatus();
    this.queryShopInfo();
    this.queryShopCouponInfo();
    this.queryOrderData();
    this.queryShopVideoStackedLine();
  },
    computed: {
    ...mapState({
      rolesKey: (state) => state.user.rolesKey,
    }),
  },
  methods: {
      handleRouter(path){
        this.$router.replace(path)
      },

    // goTarget(href) {
    //   window.open(href, "_blank");
    // },

    // 获取所有商家的数量代理商数量
    queryShopCount() {
      getShopCount().then(res => {
        this.shopAndProxyCount = res.data
      })
    },

    // 获取优惠券活动各状态数量
    queryActivityStatus() {
      getActivityStatus().then(res => {
        this.activityStatus = res.data
      })
    },

    // 获取商户基本数据 （资源数量、剩余视频发送数量、发布优惠券活动数量、）
    queryShopInfo() {
      getShopInfo().then(res => {
        this.shopInfo = res.data
      })
    },

    // 获取订单基本数据 （订单状态、金额）
    queryOrderData() {
      getOrderData().then(res => {
        this.orderData = res.data
      })
    },

    // （管理员不可见）获取商户的优惠券领取、已使用、未使用、剩余数据统计
    queryShopCouponInfo() {
      getShopCouponInfo().then(res => {
        this.couponInfoAndStatusList = res.data;
      })
    },

    // 获取商户视频数据近七天的走势统计
    queryShopVideoStackedLine() {
      getShopVideoStackedLine().then(res => {
        let data = res.data;

        // 6条折线
        let line = data.splice(1, data.length - 1)

        // 绘制图表
        Echarts.init(document.getElementById("chart")).setOption({
          title: {
            text: '抖音视频数据近七天的走势统计'
          },
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: ['点赞数量', '下载数量', '转发数量', '播放数量', '分享数量', '评论数量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            data: data[0]
          },
          yAxis: {
            type: 'value'
          },
          series: line
        })
      })
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .box{
    display: flex;
    .box-card-top{
      justify-content: space-around;
      height: 250px;
    }
  }

  .box-card{
    margin-top: 40px;
  }
}
</style>

